<template>
	<view :data-theme="theme">
		<view :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
			<view class="card" style="margin-top: 20rpx;padding: 20rpx;">
				<swiper :autoplay="false" :current.sync="currentIndex" :style="{ height: swiperHeight + 'px' }"
					:duration="300">
					<swiper-item v-for="(tab, index) in list6" :key="index">
						<view :id="'content-wrap0'">
							<view>
								<image mode="widthFix" :src="tab"></image>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="card" style="margin-top: 20rpx;padding: 20rpx;">
				<view style="font-size: 32rpx;font-weight: bold;margin-bottom: 13rpx;">[元宝]高筋富强小麦粉25kg</view>
				<view style="display: flex;font-size: 24rpx;color: #999;margin-bottom: 13rpx; flex-wrap: wrap; ">
					<view
						style="border: 2rpx solid #dbcccd;padding: 4rpx;color: #ce3b49;border-radius: 4rpx;margin: 6rpx;">
						<text>高流量</text>
					</view>
					<view
						style="border: 2rpx solid #dbcccd;padding: 4rpx;color: #ce3b49;border-radius: 4rpx;margin: 6rpx;">
						<text>平台新品</text>
					</view>
					<view
						style="border: 2rpx solid #dbcccd;padding: 4rpx;color: #ce3b49;border-radius: 4rpx;margin: 6rpx;">
						<text>本地热销品</text>
					</view>
					<view
						style="border: 2rpx solid #dbcccd;padding: 4rpx;color: #ce3b49;border-radius: 4rpx;margin: 6rpx;">
						<text>本地热销品</text>
					</view>
				</view>
				<view style="display: inline-block;padding: 16rpx 0 20rpx 0;">
					<view>参考价 <text style="font-size: 30rpx;font-weight: bold;margin-left: 10rpx;">86.62元(1袋)</text>
					</view>
				</view>
			</view>
			<view class="card" style="margin-top: 20rpx;padding: 10px 10px 0px;">
				<view style="color: #999;margin:0 0 20rpx 0;font-size: 30rpx;">北京事业部售卖数据</view>
				<view class="class-hot">
					<view>
						客户热度
					</view>
					<view style="margin-left: 10rpx;display: flex;">
						<view v-for="(index) in 3">
							<view class='pictrue'>
								<image src='../common/static/redu.png' style="width: 32rpx;height: 32rpx;"></image>
							</view>
						</view>
						<view v-for="(index) in (5-3)">
							<view class='pictrue'>
								<image src='../common/static/hot-hui.png' style="width: 32rpx;height: 32rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				<view style="display: flex;font-size: 28rpx;margin-bottom: 20rpx;padding-bottom: 30rpx;">
					<view>月销<text>￥29.3万+</text></view>
					<text style="margin: 0 20rpx;color: #ebebeb;">|</text>
					<view>
						月买客户<text style="margin: 0 10rpx;">700+</text></view>
				</view>

			</view>
			<view class="card" style="padding: 20rpx 20rpx 0rpx;">
				<view class="product-card">
					<view style="display: flex;flex-flow: column;flex: 1;">
						<view class="inforn_content">
							<view class="item_content_left">商品品牌</view>
							<view class="item_content_right">元宝</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">商品类目</view>
							<view class="item_content_right">米面粮油/通用面粉/中高筋粉</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">保质期</view>
							<view class="item_content_right">6个月</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">贮存方式</view>
							<view class="item_content_right">常温</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">运输方式</view>
							<view class="item_content_right">常温运输</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">最小包装规格</view>
							<view class="item_content_right">25kg/袋</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">最小包装单位</view>
							<view class="item_content_right">袋</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">食材标签</view>
							<view class="item_content_right">富强粉</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">国产进口</view>
							<view class="item_content_right">国产</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">产地</view>
							<view class="item_content_right">北京</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">面粉等级型号</view>
							<view class="item_content_right">特制一等</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">通用面粉星级</view>
							<view class="item_content_right">不区分星级</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">商品外包装名称</view>
							<view class="item_content_right">高筋富强小麦粉</view>
						</view>
						<view class="inforn_content">
							<view class="item_content_left">工厂</view>
							<view class="item_content_right">不区分</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card" style="margin-top: 20rpx;padding: 10px 10px 0px;">
				<!-- 商品描述 -->
				<view class="product-card">
					<view style="color: #999;margin:0 0 20rpx 0;font-size: 30rpx;">商品描述</view>
					<view style="line-height: 20px;">商品介绍:精选优质白麦加工而成，面筋含量及筋力中
						等，粉色较白生产日期:见包装喷码 储存方式:阴
						凉、通风、干燥处 适用商户: 适合店铺制作馒头、面
						条等面食店</view>
				</view>
			</view>
			<view class="card" style="padding: 20rpx 20rpx 0rpx;">
				<!-- 推荐 -->
				<view class="product-card">
					<view style="color: #999;margin:0 0 20rpx 0;font-size: 30rpx;">以下客户可能会购买该商品</view>
					<view style="display: flex;font-size: 28rpx;margin-bottom: 13rpx; flex-wrap: wrap; ">
						<view style="padding: 8rpx 20rpx;margin: 6rpx;background-color: #f6f6f6;">
							<text>主食厨房</text>
						</view>
						<view style="padding: 8rpx 20rpx;margin: 6rpx;background-color: #f6f6f6;">
							<text>烧饼/馅饼/手抓饼</text>
						</view>
						<view style="padding: 8rpx 20rpx;margin: 6rpx;background-color: #f6f6f6;">
							<text>煎饼果子</text>
						</view>
						<view style="padding: 8rpx 20rpx;margin: 6rpx;background-color: #f6f6f6;">
							<text>包子/粥/烧麦</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card" style="padding: 0rpx 20rpx 0rpx;">
				<!-- 规格 -->
				<view class="product-card">
					<u-tabs :list="skusList" :scrollable="true" :lineColor="bgColor" :current="tabIndex"
						:activeStyle="{ color: '#000',fontWeight: '600'}" :inactiveStyle="{color:'#4c4d51'}"></u-tabs>
					<view style="display: flex;flex-flow: column;flex: 1;margin: 20rpx 20rpx 0;">
						<view class="item_content">
							<view class="item_content_left">售卖单位</view>
							<view class="item_content_right">袋</view>
						</view>
						<view class="item_content">
							<view class="item_content_left">商品内包装</view>
							<view class="item_content_right">1袋</view>
						</view>
						<view class="item_content">
							<view class="item_content_left">商品净重</view>
							<view class="item_content_right">-</view>
						</view>
						<view class="item_content">
							<view class="item_content_left">毛重</view>
							<view class="item_content_right">26324g</view>
						</view>
						<view class="item_content">
							<view class="item_content_left">箱规</view>
							<view class="item_content_right">每袋1袋</view>
						</view>
						<view class="item_content">
							<view class="item_content_left">国际条码</view>
							<view class="item_content_right">694563700474</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
				<view style="display: flex;padding: 8rpx 0;align-items: center;justify-content: space-around;">
					<view style="display: flex;justify-content: space-around;flex: 1;">
						<view style="display: flex;flex-direction: column;text-align: center;">
							<view>
								<image style="width: 40rpx;height: 40rpx;" mode="heightFix"
									src="../common/static/star.png"></image>
							</view>
							<view style="font-size: 28rpx;margin-top: 10rpx;">
								稍后上品
							</view>
						</view>
					</view>
					<view
						style="margin-left:15rpx;line-height: 75rpx;flex: 1; font-weight: bold;color: #fff;border-radius: 12rpx;padding: 0 40rpx;text-align: center;"
						class="bg_color" plain="true" @click="showInfoModal(2,item)">立即上品</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		categoryApi,
	} from '@/api/product.js';
	import {
		productDetailApi
	} from '@/api/product.js'
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	import animationType from '@/utils/animationType.js'
	import UniSection from '@/components/uni/uni-swipe-action/uni-swipe-action.vue';
	let app = getApp();
	export default {
		components: {
			'uni-section': UniSection
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				list6: [
					'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
				],
				tabIndex: 0,
				styleType: 'text', //切换按钮
				showSkeleton: true, //骨架屏显示隐藏
				options: null, //浏览器对象
				id: null, //商品id
				productDetail: {
					name: '高筋富强小麦粉',

				}, //商品详情
				specParamMap: null, //规格参数
				sliderImages: [], //轮播图列表
				productCredentials: [], //资质
				skuArr: [],
				attrValue: null,
				// tabList: [],

				imageTabList: [],
				// ----------滑动切屏
				swiperHeight: 0, //滑块的高度(单位px)
				currentIndex: 0, //当前索引
				categoryTree: [], //平台商品分类树
				categoryname: '',
				// -----------skusList----------
				skusList: [{
					name: '1袋',
					value: 1
				}, {
					name: '两袋',
					value: 2
				}],
				tabIndex: 0,
			};
		},
		async onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.imageTabList = [{
					id: "tab1",
					name: "商品封面图",
					pageid: 1
				},
				{
					id: "tab2",
					name: "商品轮播图",
					pageid: 2
				},
				{
					id: "tab3",
					name: "商品详情图",
					pageid: 3
				},
			];
			//获取浏览器传来的对象
			this.options = options;

			//获取浏览器中的参数，商品id，商品类型type，普通normal，秒杀seckill，砍价，拼团，视频号video
			// if (!options.scene && !options.id) {
			// 	this.showSkeleton = false;
			// 	this.$util.Tips({
			// 		title: '缺少参数无法查看商品'
			// 	}, {
			// 		url: '/pages/index/index'
			// 	});
			// 	return;
			// }

			// if (options.id) this.id = options.id;

			// 加载 商品 详情 信息等
			// this.loadData();
			// await this.getCategoryTree();
		},
		onShow() {
			// 加载 商品 详情 信息等
			this.loadData();
		},
		methods: {
			//数据初始化
			async loadData() {
				//加载商品数据
				await this.getProductDetail();
				// TODO 加载需要的其他数据
				//隐藏骨架
				this.showSkeleton = false;
				//动态设置swiper的高度 最后设置！！
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},



			//查询商品详情
			async getProductDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let that = this;
				await productDetailApi(this.id).then(res => {
					if (res.code == 200) {
						that.productDetail = res.data;
						that.skuArr = res.data.attrValue;
						that.attrValue = that.skuArr[0];

						// 格式化商品参数 specParam
						//商品规格参数
						let specParam = that.productDetail.specParam;
						let specParamMap = JSON.parse(specParam);
						that.$set(that, 'specParamMap', specParamMap);
						//商品轮播图
						let sliderImage = that.productDetail.sliderImage;
						let sliderImages = JSON.parse(sliderImage);
						that.$set(that, 'sliderImages', sliderImages);

						let productCredential = that.productDetail.productCredential;
						let productCredentials = JSON.parse(productCredential);
						that.$set(that, 'productCredentials', productCredentials);


					}
					uni.hideLoading();
					//分类的回显
					for (let i = 0; i < this.categoryTree.length; i++) {
						if (this.categoryTree[i].id == that.productDetail.categoryId) {
							that.categoryname = this.categoryTree[i].name;
							break;
						} else {
							that.categoryname = '未添加';
						}
					}
				}).catch(err => {
					console.log("upOfDown error", err)
					uni.hideLoading();
				});

			},

			tapAttr(skuItem) {
				this.attrValue = skuItem;

			},
			tabClick(item) {
				// this.tabIndex = item.index;
				this.tabIndex = item.currentIndex;
			},

			//手动切换题目
			changeSwiper(e) {
				// this.currentIndex = e.detail.current;
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			//动态设置swiper的高度
			setSwiperHeight() {
				let element = "#content-wrap" + this.currentIndex;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeight = res[0].height;
					}
				});
			},

			//-----
			//查询平台端商品分类缓存树
			async getCategoryTree() {
				let res = await categoryApi();
				let that = this;
				if (res.code == 200) {
					// this.categoryTree = res.data;
					const result = [];
					for (const item1 of res.data) {
						for (const item2 of item1.childList) {
							for (const item3 of item2.childList) {
								result.push(item3);
							}
						}
					}
					this.categoryTree = result;
				}
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.card {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.name-param {
		line-height: 50rpx;
	}

	// 客户热度
	.class-hot {
		font-size: 28rpx;
		margin: 13rpx 0;
		// color: #999;
		display: flex;
		align-items: center;
	}

	.sku-select1 {
		.flex-text {
			margin: 8rpx 8rpx;
			background-color: #f7f7f7;
			line-height: 62rpx;
			text-align: center;
			color: #777;
			padding: 10rpx 20rpx;
			font-size: 24rpx;
			border-radius: 10rpx;
			border: 1rpx solid #FFF;
		}

		.right-class-active {
			@include main_color(theme);
			@include main_bg_rgba_color(theme, 0.05);
			border: 1rpx solid;
		}
	}

	.sku-select2 {
		.scroll-content {
			white-space: nowrap;
			height: 86rpx;

			text {
				margin: 8rpx 8rpx;
				background-color: #f7f7f7;
				line-height: 86rpx;
				text-align: center;
				color: #777;
				padding: 25rpx 20rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				border: 1rpx solid #FFF;
			}

			.right-class-active {
				@include main_color(theme);
				@include main_bg_rgba_color(theme, 0.05);
				border: 1rpx solid;
			}
		}
	}

	.product-card {
		margin-top: 20rpx;
		padding-bottom: 20rpx;

		.product-title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}

	.product-sku-row {
		margin-bottom: 20rpx;
		font-size: 15px;

		.title {
			color: #777;
		}

		.value {
			font-weight: bold;
		}
	}

	.item_content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.item_content_left {
			flex: 1;
			font-size: 14px;
			color: #7c7c7c;
			margin-right: 10px;
		}

		.item_content_right {
			flex: 2;
		}
	}

	.inforn_content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.item_content_left {
			color: #7c7c7c;
			flex: 1;
			font-size: 14px;
			margin-right: 10px;
		}

		.item_content_right {
			flex: 2;
		}
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #000;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>